<template>
  <div class="jianli">
    <a-tabs v-model:activeKey="activeKey" :animated="false" class="tabs custom-tabs">
      <a-tab-pane key="zaixianjianli" tab="在线简历">
        <ZaiXianJianLi v-if="activeKey === 'zaixianjianli'" />
      </a-tab-pane>
      <a-tab-pane key="fujianjianli" tab="附件简历">
        <BiaoZhunJianLi v-if="activeKey === 'fujianjianli'" />
      </a-tab-pane>
      <!-- <a-tab-pane key="nenglimoxing" tab="能力模型">
        <HouXuanRenHuaXiang v-if="activeKey === 'nenglimoxing'" />
      </a-tab-pane> -->
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import ZaiXianJianLi from './ZaiXianJianLi.vue';
import BiaoZhunJianLi from './BiaoZhunJianLi.vue';
// import HouXuanRenHuaXiang from './HouXuanRenHuaXiang.vue';
import { useRoute } from 'vue-router';

const { query } = useRoute();
const tabs = ['zaixianjianli', 'fujianjianli', 'nenglimoxing'];
let _activeKey = 'zaixianjianli';
if (tabs.includes(query.key as string)) {
  _activeKey = query.key as string;
}

const activeKey = ref<string>(_activeKey);
</script>

<style lang="scss" scoped>
@use '@/styles/reset-a-tabs';

.jianli {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 10px 0 #d0cbcc7a;
  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}
</style>
